<template>
  <div class="home">
    <Nav></Nav>
    <div class="homeBox_00Bg">
      <div :style="{'background':'url('+require('@/assets/img/home/box_00/home-bg.svg')+') no-repeat','backgroundSize':'cover'}" class="homeBox_00">
        <div class="content">
          <h1>
            Get写作，一站式智能写作服务平台
          </h1>
          <h4>
            全网热点追踪·推荐海量素材·提升原创质量
          </h4>
          <div class="searchBox">
            <input type="text" placeholder="输入你想写的内容">
            <button>开始写作</button>
          </div>
        </div>
      </div>
    </div>

    <div class="homeBox_01Bg">
      <dl class="homeBox_01">
        <dt>
          <div class="h_b_01_box b_00">
            <div class="le">
              <img src="@/assets/img/home/box_01/00.svg" >
            </div>
            <div class="ri">
              热点发现
            </div>
          </div>
          <div class="h_b_01_box b_01">
            <div class="le">
              <img src="@/assets/img/home/box_01/01.svg" >
            </div>
            <div class="ri">
              智能改写
            </div>
          </div>
          <div class="h_b_01_box b_02">
            <div class="le">
              <img src="@/assets/img/home/box_01/02.svg" >
            </div>
            <div class="ri">
              质量检测
            </div>
          </div>
        </dt>
        <dd>
            <div class="left">
              <span>想持续了解AI写作，按</span>
              <strong>Ctrl或Command</strong>
              <span>+</span>
              <strong>D</strong>
              <span>收藏我们</span>

            </div>
            <div class="right">
               <img src="@/assets/img/home/box_01/play.svg" >
               <span>
                 新手教程
               </span>
            </div>
        </dd>
      </dl>
    </div>

    <div class="homeBox_02Bg">
      <div class="homeBox_02 wrap">
        <div class="h_b_02Box">
          <div class="text">
            <div class="title">
              <h1>
                监控全网热点
              </h1>
              <h4>
                全网热点新闻每小时更新、各行业数据应有尽有
              </h4>
            </div>
            <div class="btn">
              <span>
                查看更多
              </span>
            </div>
          </div>
          <div class="tu firTu">
            <img src="@/assets/img/home/box_02/00.png" alt="">
          </div>
        </div>
        <div class="h_b_02Box">
          <div class="tu">
            <img src="@/assets/img/home/box_02/01.png" alt="">
          </div>
          <div class="text">
            <div class="title">
              <h1>
                丰富写作素材
              </h1>
            </div>
            <div class="secTextBox">
              <dl>
                <dt>全网素材</dt>
                <dd>收集全网优质素材，包括微信、百度、今日头条、知乎等平台</dd>
              </dl>
              <dl>
                <dt>智能拆解</dt>
                <dd>AI解析文章内容，提供文章、段落、图片等多维度写作素材</dd>
              </dl>
              <dl>
                <dt>写作角度</dt>
                <dd>AI推荐写作角度，激发您的写作灵感，实现快速写作新体验</dd>
              </dl>
              <dl>
                <dt>收藏</dt>
                <dd>一键快速收藏素材，大幅度提高写作效率，避免996加班苦恼</dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="h_b_02Box">
          <div class="text">
            <div class="title">
              <h1>
                海量写作模板
              </h1>
              <h4>
                涵盖娱乐、旅游、科技、人物、干货等多种领域和写作方向
              </h4>
            </div>

            <ul>
            	<li><span>结合内容智能生成动态写作大纲</span></li>
            	<li><span>多个同类优质素材随意筛选替换</span></li>
            	<li><span>定制图库、快速配图</span></li>
            </ul>

            <div class="btn">
              <span>
                查看更多
              </span>
            </div>
          </div>
          <div class="tu thirdTu">
            <img src="@/assets/img/home/box_02/02.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="homeBox_03Bg">
      <div class="homeBox_03">
        <div class="T_title">
          <h2>
            3大AI创新写作功能，提升写作效率
          </h2>
          <h5>
            写作全流程体验设计，深度开发AI功能，提供一站式写作服务
          </h5>
        </div>
        <div class="btn">
          <span>
            立即体验
          </span>
        </div>

        <ul class="wrap">
        	<li>
            <div class="tuBox tu_00">
              <div class="tu">
                <img src="@/assets/img/home/box_03/icon1.svg" alt="">
              </div>
              <div class="ceng">
                <img src="@/assets/img/home/box_01/play.svg" >
              </div>
            </div>

            <div class="txt">
              <strong>
                写作角度
              </strong>
              <span>
                智能推荐写作角度
              </span>
            </div>
          </li>
        	<li>
            <div class="tuBox tu_01">
              <div class="tu">
                <img src="@/assets/img/home/box_03/icon1.svg" alt="">
              </div>
              <div class="ceng">
                <img src="@/assets/img/home/box_01/play.svg" >
              </div>
            </div>

            <div class="txt">
              <strong>
                写作角度
              </strong>
              <span>
                智能推荐写作角度
              </span>
            </div>
          </li>
        	<li>
            <div class="tuBox tu_02">
              <div class="tu">
                <img src="@/assets/img/home/box_03/icon1.svg" alt="">
              </div>
              <div class="ceng">
                <img src="@/assets/img/home/box_01/play.svg" >
              </div>
            </div>

            <div class="txt">
              <strong>
                写作角度
              </strong>
              <span>
                智能推荐写作角度
              </span>
            </div>
          </li>
        </ul>

      </div>
    </div>

    <div class="homeBox_04Bg">
    	<div class="homeBox_04">
        <div class="T_title">
          <h2>
            实时全网热点，发现写作创意
          </h2>
        </div>

        <dl class="h_b_04BoxMain wrap">
          <dt>
            <ul>
            	<li class="hb_ac_00">
                <span>
                  百度
                </span>
              </li>
            	<li>
                <span>
                  百度
                </span>
              </li>
            	<li>
                <span>
                  百度
                </span>
              </li>
            	<li>
                <span>
                  百度
                </span>
              </li>
            </ul>
          </dt>
          <dd>
            <ul>
            	<li>
                <div class="t">
                  <div class="tu">
                    <img src="@/assets/img/home/box_04/wx_green.png" >
                  </div>
                  <span>
                    成都 ‧ 24h热文榜
                  </span>
                </div>
                <div class="m">
                    <dl>
                      <dt>
                        1
                      </dt>
                      <dd>
                        「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        1
                      </dt>
                      <dd>
                        「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        1
                      </dt>
                      <dd>
                        「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        1
                      </dt>
                      <dd>
                        「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        1
                      </dt>
                      <dd>
                        「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        1
                      </dt>
                      <dd>
                        「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        1
                      </dt>
                      <dd>
                        「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        1
                      </dt>
                      <dd>
                        「人民日报」90后小夫妻凌晨3点驾车“冲”进派出所，车上还有个老人……
                      </dd>
                    </dl>
                </div>
                <div class="b">
                  <span>
                    2小时前
                  </span>
                  <div class="ri">
                    <img src="@/assets/img/home/box_04/sc.png" >
                    <span>
                      关注
                    </span>
                  </div>
                </div>
              </li>
             
            </ul>
          </dd>
        </dl>
      </div>
    </div>

    <div class="homeBox_05Bg">
      <div class="homeBox_05">
        <div class="T_title">
          <h2>
            海量智能模板，多种内容快速成文
          </h2>
        </div>
        <dl class="wrap">
          <dt>
            <div class="btn le">
              全部
            </div>
            <div class="btn ri">
              更多模板
            </div>
          </dt>
          <dd>
            <ul>
            	<li v-for="(h_b_05It,h_b_05Idx) in h_b_05Arr" :key="'h_b_05It_0'+h_b_05Idx">
                <div class="tu">
                  <img :src="h_b_05It.tu" >
                </div>
                <h4>
                  {{h_b_05It.txt}}
                </h4>
              </li>
              <li v-for="(h_b_05B_It,h_b_05B_Idx) in (5-h_b_05Arr.length%5)" :key="'h_b_05B_It_0'+h_b_05B_Idx" class="block"></li>
            </ul>
          </dd>
        </dl>
      </div>
    </div>

    <div class="homeBox_06Bg">
    	<div class="homeBox_06 wrap">
        <div class="T_title">
          <h2>
            合作伙伴
          </h2>
        </div>

        <ul class="t">

          <li v-for="(h_b_06It,h_b_06Idx) in h_b_06Arr" :key="'h_b_06It_0'+h_b_06Idx">
            <div class="tuBox">
              <img :src="h_b_06It" >
            </div>
          </li>

        </ul>
        <ul class="b">

          <li>

            <div class="tu">
              <div class="L">
                <div class="tu">
                  <img src="@/assets/img/home/box_06/user2.png" >
                </div>
                <span>
                  上海｜运营
                </span>
              </div>
              <img src="@/assets/img/home/box_06/dot.png" alt="" class="R">
            </div>

            <div class="txt">
              我最初在公司当编辑的时候写文章都是靠自己绷着脑袋想话题、找素材，到头来读者的差评一大堆。 有一天朋友圈疯狂刷屏一个AI写作软件，我看了一眼介绍就
              付费入手了。空闲之后我找软件客服赅小推了解软件的操作说明，用起来挺简单上手的，抱着试一试的心态去创作了一篇文章发布头条，没想到阅读量竟然破万了，这
              是公司账号阅读量第一次破万。
            </div>

          </li>

          <li>

            <div class="tu">
              <div class="L">
                <div class="tu">
                  <img src="@/assets/img/home/box_06/user2.png" >
                </div>
                <span>
                  上海｜运营
                </span>
              </div>
              <img src="@/assets/img/home/box_06/dot.png" alt="" class="R">
            </div>

            <div class="txt">
              我最初在公司当编辑的时候写文章都是靠自己绷着脑袋想话题、找素材，到头来读者的差评一大堆。 有一天朋友圈疯狂刷屏一个AI写作软件，我看了一眼介绍就
              付费入手了。空闲之后我找软件客服赅小推了解软件的操作说明，用起来挺简单上手的，抱着试一试的心态去创作了一篇文章发布头条，没想到阅读量竟然破万了，这
              是公司账号阅读量第一次破万。
            </div>

          </li>

        </ul>

      </div>
    </div>
    <Foot></Foot>

  </div>
</template>

<script>
import Foot from "@/components/foot.vue"
import Nav from "@/components/nav.vue";
export default {
  name: 'Home',
  data(){
    return{
      h_b_05Arr:[
        {
          tu:require('@/assets/img/home/box_05/tu.jpeg'),
          txt:"节日模板"
        },
        {
          tu:require('@/assets/img/home/box_05/tu.jpeg'),
          txt:"节日模板"
        },
        {
          tu:require('@/assets/img/home/box_05/tu.jpeg'),
          txt:"节日模板"
        },
        {
          tu:require('@/assets/img/home/box_05/tu.jpeg'),
          txt:"节日模板"
        },
        {
          tu:require('@/assets/img/home/box_05/tu.jpeg'),
          txt:"节日模板"
        },
        {
          tu:require('@/assets/img/home/box_05/tu.jpeg'),
          txt:"节日模板"
        },
        {
          tu:require('@/assets/img/home/box_05/tu.jpeg'),
          txt:"节日模板"
        },
        {
          tu:require('@/assets/img/home/box_05/tu.jpeg'),
          txt:"节日模板"
        },
        {
          tu:require('@/assets/img/home/box_05/tu.jpeg'),
          txt:"节日模板"
        }
      ],
      h_b_06Arr:[
        require('@/assets/img/home/box_06/partner.png'),
        require('@/assets/img/home/box_06/partner.png'),
        require('@/assets/img/home/box_06/partner.png'),
        require('@/assets/img/home/box_06/partner.png'),
        require('@/assets/img/home/box_06/partner.png'),
        require('@/assets/img/home/box_06/partner.png'),
        require('@/assets/img/home/box_06/partner.png'),
        require('@/assets/img/home/box_06/partner.png'),
        require('@/assets/img/home/box_06/partner.png'),
        require('@/assets/img/home/box_06/partner.png')
      ]
    }
  },
  components: {
    Nav,
    Foot
  },
 mounted() {
   let that=this;
 },
 methods:{

 }
}
</script>
<style lang="less" scoped="scoped">
  @import "../assets/css/home.less";
</style>
